import React, { PureComponent } from 'react'
import { ResizableBox } from 'react-resizable'
// import VirtualList from 'react-tiny-virtual-list'
import Tools from '@/utils/Tools'
import styles from './index.less'

const Bus = Tools.Bus
const buildStr = (list = []) => list
  .filter((log) => log && log.indexOf('@@@@') === -1)
  .join('\n')

class Logger extends PureComponent {
  state = {
    height: 64,
    newHeight: 300,
    listStr: buildStr(this.props.list),
    // listStr: this.props.list,
  };

  logRef = React.createRef();

  componentDidMount() {
    Bus.addListener('iconUpFn2', this.iconUpFn.bind(this))
  }

  componentWillReceiveProps(nextProps) {
    // 判断当前是否需要滚动，如果滚动条在最下面的话，则需要滚动
    const logger = this.logRef.current
    if (!logger) return
    const offsetHeight = logger.offsetHeight
    const scrollTop = logger.scrollTop
    const scrollHeight = logger.scrollHeight
    if (offsetHeight + scrollTop === scrollHeight) {
      // 为了react渲染之后再滚动，消除fiber的影响
      this.setState({}, () => {
        logger.scrollTop = logger.scrollHeight
      })
    }
    if (this.props.list.length !== nextProps.list.length) {
      this.setState({
        listStr: buildStr(nextProps.list),
        // listStr: nextProps.list,
      })
    }
  }

  componentWillUnmount() {
    Bus.removeListener('iconUpFn2', this.iconUpFn.bind(this))
  }

  iconDownFn() {
    this.setState({
      height: 64,
    })
  }

  iconUpFn() {
    const { newHeight } = this.state
    this.setState({
      height: newHeight < 100 ? 300 : newHeight,
    })
  }

  render() {
    const { url, className } = this.props
    const { listStr, height } = this.state
    const clientHeight = document.documentElement.clientHeight

    return (
      <ResizableBox
        className={`${styles.box_log2} ${className}`}
        axis="x"
        height={height}
        width={Infinity}
        minConstraints={[Infinity, 63]}
        maxConstraints={[Infinity, clientHeight - 200]}
        onResize={(e) => {
          const h = clientHeight - e.clientY
          if (h > 63 && h < clientHeight - 200) {
            this.setState({
              height: h,
              newHeight: h,
            })
          } else if (h < 64) {
            this.setState({
              height: 64,
            })
          }
        }}
      >
        <div
          className={styles.editor_logger}
          onClick={(event) => {
            event.nativeEvent.stopImmediatePropagation()
          }}
        >
          <div className={`${styles.logger_box_text} ${this.props.theme || ''}`}>
            <div className={styles.logger_head}>
              <span className={styles.title}>运行日志</span>
              {height < 66 ? (
                <span className={styles.icon_up} onClick={this.iconUpFn.bind(this)}>
                  <i className="iconfont icon-zhankai1-copy" />
                </span>
              ) : (
                <span className={styles.icon_down} onClick={this.iconDownFn.bind(this)}>
                  <i className="iconfont icon-shouqi1-copy" />
                </span>
              )}
            </div>

            <div ref={this.logRef} className={styles.logger_content}>
              <div style={{ width: '100%', height: '100%' }}>
                {url ? (
                  <iframe src={url} frameBorder="0" />
                ) : (
                  <p>{listStr}</p>
                  // <VirtualList
                  //   width="100%"
                  //   height={height - 80}
                  //   itemCount={listStr.length}
                  //   itemSize={30} // Also supports variable heights (array or function getter)
                  //   renderItem={({ index, style }) => (
                  //     <div key={index} style={style}>
                  //       {listStr[index]}
                  //     </div>
                  //   )}
                  // />
                )}
              </div>
            </div>
          </div>
        </div>
      </ResizableBox>
    )
  }
}

export default Logger
